<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-12 16:00:05
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 创建单位页 -->
<script lang="ts" setup>
// import type { FireInspectionPerson } from '@/genapi/fireProduct';
import { fireProductFireApiInspectionPersonJobQuerybyPost } from '@/genapi/fireProduct';
import { useUserStore } from '@/stores/user';
defineOptions({ name: 'Login' });
const userStore = useUserStore();

// const { execute, isLoading } = useAsyncState(
// 	async () => {
// 		await userStore.login(form.value);
// 	},
// 	undefined,
// 	{
// 		immediate: false,
// 	},
// );
const router = useRouter();

const submit = () => {
	router.replace({ path: '/login' });
};

const form = ref({
	name: '',
	phone: '',
	type: '',
	duties: '',
	pwd: '',
	pwdRepeat: '',
});

const back = () => {
	router.replace({ path: '/login/register' });
};

const unitColumns = ref([
	{ text: '南京', value: 'Nanjing' },
	{ text: '无锡', value: 'Wuxi' },
	{ text: '海北', value: 'Haibei' },
	{ text: '北京', value: 'Beijing' },
	{ text: '连云港', value: 'Lianyungang' },
	{ text: '长沙', value: 'Changsha' },
	{ text: '武汉', value: 'Wuhan' },
]);

const showPopup = ref(false);

const confirm = ({ selectedValue, selectedOptions }, title) => {
	form.value[title] = selectedValue[0];
	showPopup.value = false;
};

const rules = ref({
	name: [{ required: true, message: '请填写姓名' }],
	type: [{ required: true, message: '请选择工种类别' }],
	phone: [{ required: true, message: '请填写联系电话' }],
	duties: [{ required: false, message: '请选择职务' }],
	pwd: [{ required: true, message: '请填写密码' }],
	pwdRepeat: [{ required: true, message: '请再次填写密码' }],
});
</script>

<template>
	<div class="register-table-page">
		<nut-navbar title="注册账号" left-show @click-back="back"></nut-navbar>
		<nut-form ref="formRef" :model-value="form" :rules="rules">
			<nut-form-item>
				<div class="basedata-form-title">人员基本信息</div>
			</nut-form-item>
			<nut-form-item prop="name" label="姓名">
				<nut-input v-model="form.name" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="phone" label="联系电话">
				<nut-input v-model="form.phone" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="type" label="工种类别">
				<div class="selector-box" @click="showPopup = true">
					{{ form.type }}<span v-if="!form.type">请选择</span
					><IconFont name="rect-right" color="#a9a7a7"></IconFont>
				</div>
				<nut-popup v-model:visible="showPopup" position="bottom">
					<nut-picker
						@confirm="(params) => confirm(params, 'type')"
						:columns="unitColumns"
						title="请选择单位类别"
						@cancel="showPopup = false"
					/>
				</nut-popup>
			</nut-form-item>
			<nut-form-item prop="duties" label="职务">
				<nut-input v-model="form.duties" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item>
				<div class="basedata-form-title">密码确认</div>
			</nut-form-item>
			<nut-form-item prop="pwd" label="输入密码">
				<nut-input v-model="form.pwd" placeholder="请输入" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item prop="pwdRepeat" label="确认密码">
				<nut-input v-model="form.pwdRepeat" placeholder="请再次输入密码" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item>
				<nut-button block class="register-submit-button" :loading="isLoading" @click="submit">
					注册
				</nut-button>
			</nut-form-item>
		</nut-form>
	</div>
</template>

<style scoped lang="scss">
.register-table-page {
	display: flex;
	flex-direction: column;
	width: 100vw;
	--nut-cell-color: #000;
	--nut-cell-box-shadow: 0;
	--nut-form-item-label-font-size: 12px;
	--nut-input-border-bottom: #588bff 1px;
	--nut-checkbox-label-color: #606266;
	--nut-checkbox-label-font-size: 12px;
	--nut-primary-color: #165dff;
	--nut-input-font-size: 12px;
	--nut-navbar-title-font: 16px;
	--nut-icon-line-height: 20px;
	.nut-form {
		.nut-form-item {
			margin-bottom: 5px;
			border-bottom: 1px solid #e3e4e5;
		}
		.validity-upload-title {
			font-size: 14px;
			color: #000;
			span {
				font-size: 12px;
				color: #909399;
			}
		}
		.validity-uploader {
			margin-top: 20px;
		}
		.selector-box {
			color: #000;
			font-size: 12px;
			span {
				color: #929292;
			}
			.nut-icon-rect-right {
				position: fixed;
				right: 10px;
			}
		}
		.basedata-form-title {
			font-size: 14px;
			color: #000;
		}
	}
	.register-submit-button {
		height: 35px;
		margin-top: 260px;
		font-size: 14px;
		color: #fff;
		background: #165dff;
		border: 1px solid #034196;
		border-radius: 16px;
	}
}
</style>
